<template>
  <div class="main container-fluid">
    <div class="row">
      <div class="col-sm-4 col-md-6 col-lg-7 col7"></div>
      <div class="col-sm-8 col-md-6 col-lg-5">
        <el-card class="box-card">
          <div slot="header" class="clearfix login-header">
            <h3>欢迎登录运营管理平台</h3>
            <div class="row">
              <div class="col">
                <div @click="radio2 = !radio2" :class="radio2?'border1':'border2'">账号密码登录</div>
              </div>
              <div class="col">
                <div @click="radio2 = !radio2" :class="radio2?'border2':'border1'">验证码登录</div>
              </div>
            </div>
          </div>

          <el-form
            :model="ruleForm2"
            status-icon
            ref="ruleForm2"
            label-width="0px"
            v-show="!radio2"
            :rules="rules"
          >
            <el-form-item label prop="loginID">
              <el-input placeholder="请输入您的手机号" v-model="ruleForm2.loginID">
                <svg class="icon svg-icon" slot="prefix" aria-hidden="true">
                  <use xlink:href="#iconiconfont-copy" />
                </svg>
              </el-input>
            </el-form-item>
            <el-form-item label prop="password">
              <el-input
                type="password"
                placeholder="请输入您的密码"
                @keyup.13="submitForm('ruleForm2')"
                v-model="ruleForm2.password"
              >
                <svg class="icon svg-icon" slot="prefix" aria-hidden="true">
                  <use xlink:href="#iconmima" />
                </svg>
              </el-input>
            </el-form-item>
            <button
              type="button"
              class="btn btn-primary btn-block btn-lg btn-yy"
              @click="submitForm('ruleForm2')"
              :disabled="!checked"
            >登录</button>
          </el-form>
          <el-form
            :model="ruleForm3"
            status-icon
            ref="ruleForm3"
            :rules="rules"
            label-width="0px"
            v-show="radio2"
          >
            <el-form-item label prop="phonenumber">
              <el-input placeholder="手机号" v-model="ruleForm3.phonenumber">
                <svg class="icon svg-icon el-input__icon" slot="prefix" aria-hidden="true">
                  <use xlink:href="#iconiconfont-copy" />
                </svg>
              </el-input>
            </el-form-item>
            <el-form-item label prop="yzm">
              <el-input
                type="password"
                placeholder="验证码"
                @keyup.13="submitForm('ruleForm3')"
                v-model="ruleForm3.yzm"
                style="line-height:none;"
                prefix-icon="el-icon-s-promotion"
              >
                <el-button
                  :disabled="disabled"
                  size="small"
                  slot="append"
                  @click="getyzm"
                  v-text="text"
                ></el-button>
              </el-input>
            </el-form-item>
            <button
              type="button"
              class="btn btn-primary btn-block btn-yy btn-lg"
              @click="submitForm('ruleForm3')"
              :disabled="!checked"
            >登录</button>
          </el-form>
          <!-- <div style="padding:20px;" class="text-center">
            <el-checkbox v-model="checked">我已阅读并接受用户协议和隐私政策</el-checkbox>
          </div> -->
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { asyncloginphonenum, asyncfind_getCode } from "../../../../plugins/api.js";
export default {
  name: "login",
  data() {
    return {
      checked: true,
      radio2: false,
      text: "获取",
      timer: Object,
      time: 60,
      disabled: false,
      ruleForm2: {
        loginID: "",
        password: ""
      },
      ruleForm3: {
        phonenumber: "",
        yzm: ""
      },
      rules: {
        loginID: [{ required: true, message: "不能为空", trigger: "blur" }],
        password: [{ required: true, message: "不能为空", trigger: "blur" }],
        phonenumber: [
          {
            required: true,
            pattern: new RegExp(/^1[3456789]\d{9}$/),
            message: "请填写正确手机号",
            trigger: "blur"
          }
        ],
        yzm: [
          {
            required: true,
            min: 4,
            max: 4,
            message: "验证码不正确",
            trigger: "blur"
          }
        ]
      },
      alls: "class1"
    };
  },
  mounted() {},
  methods: {
    ...mapActions(["login"]),
    async submitForm(name) {
      if (!this.checked) return;
      this.$refs[name].validate(async valid => {
        if (valid) {
          try {
            if (name == "ruleForm2") {
              await this.login(this.ruleForm2);
              this.$router.push("/index");
            } else {
              await asyncloginphonenum(this.ruleForm3);
              this.$router.push("/index");
            }
          } catch (err) {
            this.$message({
              message: "" + err + "!",
              type: "warning"
            });
          }
          this.$store.commit("setstate", false);
        } else {
          console.log("error submit!!");

          return false;
        }
      });
    },
    async getyzm() {
      var reg = new RegExp(/^1[3456789]\d{9}$/);
      if (!reg.test(this.ruleForm3.phonenumber)) {
        this.$message({
          message: "手机格式不正确 !",
          type: "warning"
        });
        return;
      }
      try {
        await asyncfind_getCode({ phonenumber: this.ruleForm3.phonenumber });
        this.disabled = !this.disabled;
        this.timer = setInterval(this.hc, 1000);
      } catch (err) {
        this.$message({
          message: "" + err + "!",
          type: "warning"
        });
      }
    },
    hc() {
      var a = this.time;
      this.time--;
      this.text = a;
      if (a == 0) {
        clearInterval(this.timer);
        this.time = 60;
        this.text = "获取";
        this.disabled = !this.disabled;
      }
    }
  }
};
</script>


<style lang="scss" scoped>
.main {
  background-image: url(https://cdn.hterobot.com/vue/school/image/bg_01.png);
  height: 100%;
  background-repeat: repeat;

  .row {
    display: flex;
    align-items: center;
    height: 100%;
    .col7 {
      background-image: url(https://cdn.hterobot.com/vue/school/image/LoginIP.png);
      height: 635px;
      background-position-x: right;
      background-repeat: no-repeat;
    }
    .col-lg-5 {
      .box-card {
        padding-top: 25px;
        width: 400px;
        height: 430px;
        overflow: hidden;
        background-color: rgb(255, 255, 255);
        .btn-yy {
          box-shadow: 0px 5px 12px 0px rgba(80, 183, 252, 0.41);
        }
      }
    }
  }
}

.border2 {
  text-align: center;
  color: #0099ff;
  font-size: 16px;
  height: 26px;
  line-height: 24px;
  border-bottom: 2px solid #0099ff;
  width: 97px;
  margin: 0 auto;
}

.border1 {
  text-align: center;
  color: #7a7a7a;
  font-size: 16px;
  height: 26px;
  line-height: 24px;
  border-bottom: 2px solid #ffffff;
  width: 97px;
  margin: 0 auto;
  cursor: pointer;
}

.login-header {
  h3 {
    text-align: center;
  }
}
</style>
